<template>
    <div class="goodsDesc">
        <div class="goods-info">
            <h3>{{info.title}}</h3>
            <hr>
            <div class="info">
                <div><img :src="info.url" alt=""></div>
                <p>{{info.goods_info}}</p>
            </div>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                id:this.$route.params.id,
                info:{}
            }
        },
        created(){
            this.getInfo();
        },
        methods: {
            getInfo(){
                this.$http.get('src/mock/goodsInfo.json').then(result=>{
                    if (result.status === 200){
                        if(this.id == 9){
                            this.info = result.body[8];
                        }
                        if(this.id == 8){
                            this.info = result.body[7];
                        }
                        if(this.id == 7){
                            this.info = result.body[6];
                        }
                        if(this.id == 6){
                            this.info = result.body[5];
                        }
                        if(this.id == 5){
                            this.info = result.body[4];
                        }
                        if(this.id == 4){
                            this.info = result.body[3];
                        }
                        if(this.id == 3){
                            this.info = result.body[2];
                        }
                        if(this.id == 2){
                            this.info = result.body[1];
                        }
                        if(this.id == 1){
                            this.info = result.body[0];
                        }

                    }
                })
            }
        },
        computed: {},
        components: {}
    }
</script>
<style lang="scss" scoped>
.goodsDesc{
    width: 100%;
    .goods-info{
        width: 100%;
        padding: 5px;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        box-sizing: border-box;
        h3{
            font-size: 16px;
            color: #226aff;
            text-align: center;
            margin: 15px auto;
        }
        .info{
            text-align: center;
            padding: 15px 0;
            p{
                font-size: 14px;
                text-align: left;
            }
        }
    }

}
</style>